import React, { Component } from "react";
import { 
	Modal, 
	Text, 
	TouchableHighlight, 
	View,
	TextInput,
	StyleSheet,
	Dimensions
} from "react-native";

//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度
const WIN_WIDTH = Dimensions.get('window').width;

export default class SearchModal extends Component {
  
    constructor(props){  
		super(props);               
		this.state = {                  
			modalVisible: false,//模态场景是否可见
	 	};   
	}

	setModalVisibl(e){
    	this.setState({ modalVisible: e });
	}

	render() {
		return (
			<View style={{alignItems:'center',flex:1}}>
						<Modal
							animationType={this.state.animationType}
							transparent={this.state.transparent}
							visible={this.state.modalVisible}
							onRequestClose={() => { 
							  this.setModalVisible(false) 
							}}
						 >
							<View style={[styles.modalContainer,{backgroundColor: 'rgba(0, 0, 0, 0.5)'}]}>
								<View style={[styles.innerContainer,{backgroundColor: '#F0F8FF', padding: 20}]}>
									<View style={styles.row}>
										<View >
										  <Text style={styles.tips}>请输入一个或多个条件</Text>
										</View>
										<TextInput
											style={styles.textInput}
											placeholder={'用户名称'}
											onChangeText={(text) => {
												this.custName = text;
												this.setState({custName: text})
											}}
											//输入框下划线
											underlineColorAndroid={'transparent'}/>
										<TextInput
											style={styles.textInput}
											placeholder={'用户编号'}
											onChangeText={(text) => {
												this.custCode = text;
												this.setState({custCode: text})
											}}
											//输入框下划线
											underlineColorAndroid={'transparent'}/>
									</View>
									<View style={styles.settingStyle}>
										<Text
											onPress={this.searchData.bind(this)}
											style={{fontSize:20,marginTop:10}}>
											确定
										</Text>
										<Text
											onPress={this.setModalVisible.bind(this,false) }
											style={{fontSize:20,marginTop:10}}>
											关闭
										</Text>
									</View>
								</View>  
							</View>
						</Modal>
					</View>
		);
	}
}

var width = WIN_WIDTH/2;
const styles = StyleSheet.create({
	modalContainer:{
		flex: 1,
		justifyContent: 'center',
		padding: 40,
    },
    innerContainer: {
		borderRadius: 10,
		alignItems: 'center',
    },
	tips:{
		textAlign: 'center',
		marginBottom: 5,
		fontSize: 20
    },
    textInput: {
        height: 40,
        width: width,
        marginBottom: 5,
        backgroundColor: 'white',
        textAlign: 'center',
		borderRadius:5
    },
});